$(function(){
    layui.use('form', function () {
        var form = layui.form;

        form.on('submit(comment)', function (data) {
            // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            $.ajax({
                url: "/comment",
                method: "post",
                data: {
                    content: data.field.comment,
                    id: $("#articelid").attr("dataid"),
                    date: new Date()
                },
                success: function (msg) {
                    console.log(msg.code);
                    if (msg.code) {
                        layer.msg(msg.message, {
                            icon: 1,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            $(".layui-btn-primary").click();
                            postComment();
                        });
                    } else {
                        layer.msg(msg.message, {
                            icon: 5,
                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                        }, function () {

                        });
                    }

                }
            })

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });



    var page = 1;


    (function () {
        postComment();
    })()

    $(".cprev").click(function () {
        page--;
        postComment();
    })
    $(".cnext").click(function () {
        page++;
        postComment();
    })
    function postComment() {
        $.ajax({
            url: `/articel/comment/${$("#articelid").attr("dataid")}`,
            method: "post",
            success: function (msg) {
                creatComment(msg)
            }
        })
    }

    function creatComment(comment) {
        let limit = 5;

        let maxpage = Math.ceil(comment.length / limit);
        page = Math.min(page, maxpage);
        page = Math.max(1, page);
        // if(maxpage==0)page=0;
        let skip = (page - 1) * limit;
        let leng = Math.min((skip + limit), comment.length);
        let com = ""
        if(maxpage==0){
            page=0;
        }
        $("#page").html(page);
        $("#maxpage").html(maxpage);
        // console.log(page,skip,leng);
        for (let i = skip; i < leng; i++) {
            com += `
                    <div class="combox">
                        <div class="comtitle">
                            <div class="imgback"><img src="/photo/${comment[i].user.photo}" alt=""></div>
                            <div>
                                <span>${comment[i].user.userName}</span>
                                <span>${new Date(comment[i].date).toLocaleString('chinese', { hour12: false })}</span>
                            </div>
                        </div>
                        <div class="comcont">
                            ${comment[i].content}
                        </div>
                    </div>`;
        }
        // console.log(com);
        $(".box_container").html(com);
    }



    var value = $("#iflogin").attr("dataiflogin");
    // 登陆才能评论的设置
    if (value === "true") {
        $("textarea").removeAttr("disabled");
        $("textarea").attr("placeholder", "请输入评论");
        $(".comment-btn").removeAttr("disabled");
        // $(".comment-btn").css("cursor", "pointer")
    } else {
        $("textarea").attr("disabled", "disabled");
        $("textarea").attr("placeholder", "登陆后可评论");
        $("textarea").css("cursor", "not-allowed");
        $(".comment-btn").attr("disabled", "true");
        $(".comment-btn").css("cursor", "not-allowed")
    }

     // 左侧文章跳转
     $(".arli").click(function(){
        window.location.href=$(this).attr("data-href");
    })
})